
<template>
	<view class="parent">
		<!-- #ifdef H5 -->
		<Header @back = "backToWW()" left-icon="back" left-text="" right-text="" title="集散地"></Header>
	<!-- #endif -->
		<!--搜索-->
		<view style="padding: 0;margin-bottom: 20upx;">
			<searchbar :placeholder="'请输入要搜索的集散地名称'" @confirm="onSearchConfirm"></searchbar>
		</view>
		<Calendar v-if="bShowDate" :initMonthCount="2"  :endDate="'outDateStr'" :themeColor="'#FA3300'" @callback="getDate" />
		<!-- <searchbar @input="onSearchInput" @onPopupClick="onPopupClick" @search="onSearchConfirm" :area="area"></searchbar> -->
		<!-- <view style='height:110upx;'></view> -->
		<city-list v-if="bShowCities" @onPopupItemClick="onPopupItemClick" @onPopupClick='onPopupClick' :popupMenu='popupMenu'></city-list>
		<wxc-flex dir="top" >
			<block v-for="(item,index) in datas" :key='index'>
				<view class="hotel-list" @click='onHotelClick(item)' :data-item="item">
					<view class="hotel-img">
						<image :src="item.listImage"></image>
						<view class="address">
							<text>{{item.city}}</text>
						</view>
					</view>
					<view class="hotel-info">
						<view class="hotel-name">
							<text style="font-weight: 600;font-size: 36upx;">{{item.title}}</text>
						</view>
						<view class="hotel-tip"  v-if="item.subTitle">
							<block v-for="(lab,index) in item.subTitle"  :key="index">
								<view class="tips">
									<text>{{lab}}</text>
								</view>
							</block>
						</view>
						<!-- <view class="degests">
							<text class="iconfont icon-location"></text>
							<text>{{item.address}}</text>
						</view> -->
						<view class="readCount">
							<text>{{item.readCount || 0}}人浏览</text>
						</view>
					</view>
				</view>
				<!-- <view style="display: flex;justify-content: flex-end; padding-right: 20upx;">
					<vline color='#eee' width='55%' height='1px'></vline>
				</view> -->
				<view class="br"></view>
			</block>
		</wxc-flex>
		<view style="margin-top:20upx;margin-bottom:40upx;">
			<wxc-flex v-if='isNoMore&&datas.length>0' dir='left' main='center' cross='center' style='width:100%;'>
				<vline color='#DDDDDD' width='120upx' height='1px'></vline>
				<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
				<vline color='#DDDDDD' width='120upx' height='1px'></vline>
			</wxc-flex>
		</view>
	</view>
</template>

<script>
	import searchbar from "@/components/search-bar"
	import Calendar from '@/components/mobile-calendar-simple/Calendar.vue'
	import wxcFlex from "@/components/custom/flex.vue"
	import vline from "@/components/custom/vline.vue"
	import wxcElip from "@/components/custom/wxc-elip.vue"
	import hldLabel from "@/components/custom/hld-label.vue"
	import cityList from "@/components/custom/city-list.vue"
	import hldPrice from "@/components/custom/hld-price.vue"
	import Header from "@/components/header.vue"
	var keyword = "";
	var tempKeyword = "";
	var currentPage = 1;
	var inDateStr = null;
	var outDateStr = null;
	export default {
		components: {
			searchbar,
			wxcFlex,
			vline,
			wxcElip,
			Calendar,
			hldLabel,
			cityList,
			hldPrice,
			Header
		},
		data() {
			return {
				recommendFood:[],
				recommendScence:[],
				recommendHotel:[],
				recommendTravels:[],
				footList:[],
				citys:'',
				bShowCities: false,
				bShowDate: false,
				area: "",
				startDate:'',
				endDate:'',
				trueStartDate:'',
				trueEndDate:"",
				tabIndex: 0,
				isNoMore: false,
				isEmpty: false,
				popupMenu: [],
				tips:[],
				datas: [],
				location: this.pub.getLocalcity(),
				types: [{
					title: '综合排序',
				}, {
					title: '推荐度',
				}],
			}
		},
		onLoad: function(options) {
			this.citys = options.city
			var that = this;
			console.log("首页酒店---传过来的数据----",options);
			if (options) {
				keyword = options.keyword;
				inDateStr = options.inDate;
				outDateStr = options.outDate;
				
			}

			//如果没有传入日期，则选择当前日期
			// if (!inDateStr || inDateStr == "" || !outDateStr || outDateStr == "") {
			// 	this.initDate();
			// }
			// this.initDate();
			// if (options && options.city) {
			// 	this.area = options.city;
			// } else {
			// 	this.area = this.pub.getLocalcity();
			// }
			//获取城市列表
			this.popupMenu = this.pub.getCities();
			if (this.popupMenu || this.popupMenu.length == 0) {
				this.pub.getCityList(function(res) {
					that.popupMenu = that.pub.getCities()
				})
			}

			currentPage = 1;
			// this.getHotelList();
			this.getNewHotelList("集散地");
		},
		onShow: function() {
			//#ifdef H5
			document.title = '住宿';
			//#endif
			// this.nowDate = new Date().getDate()
		},
		onReachBottom: function() {
			if (!this.isNoMore) {
				// this.getHotelList();
				this.getNewHotelList("集散地");
			}
		},
		methods: {
			getDate:function(date){
				console.log(date);
				this.trueStartDate = date.startDateStr;
				this.trueEndDate = date.endDateStr;
				this.startDate = date.startDateStr.toString().substring(date.startDateStr.toString().indexOf('-') + 1);
				this.endDate = date.endDateStr.toString().substring(date.endDateStr.toString().indexOf('-') + 1);
				this.bShowDate = !this.bShowDate;
			},
			isShowDate:function(){
				this.bShowDate = !this.bShowDate;
			},
			onSearchInput: function(e) {
				tempKeyword = e.detail.value
				console.log(tempKeyword)
			},
			onPopupClick: function(e) {
				this.bShowCities = !this.bShowCities
			},
			onPopupItemClick: function(e) {
				console.log(e)
				let city = e.currentTarget.dataset.name;
				if (city != this.area) {
					this.area = city;
					currentPage = 1;
					this.isNoMore = false;
					// this.getHotelList();
					this.getNewHotelList("集散地");
				}
				this.bShowCities = false;
			},
			onSearchConfirm: function(e) {
				console.log(e)
				keyword = tempKeyword;
				currentPage = 1;
				this.isNoMore = false;
				// this.getHotelList();
				this.getNewHotelList("集散地",e.detail.value);
			},
			onTabChange: function(e) {
				if (this.tabIndex == e.currentTarget.dataset.index)
					return
				currentPage = 1;
				this.tabIndex = e.currentTarget.dataset.index
				this.isNoMore = false;
				// this.getHotelList();
				this.getNewHotelList("集散地",e.detail.value);
			},
			onHotelClick: function(item) {
				console.log(item)
				uni.navigateTo({
					url:'/pages/agritainment/agritainmentdateil?id=' + item.id + '&title=' + '简介' + '&fleg='+ false,
					animationType: 'pop-in',
					animationDuration: 200,
					
				})
				// uni.navigateTo({
				// 	url: '/pages/food/fooddetail?id=' + item.id + "&inDate=" + this.startDate + "&outDate=" + this.endDate + "&trueInDate=" + this.trueStartDate + "&trueOutDate=" + this.trueEndDate,
				// 	animationType: 'pop-in',
				// 	animationDuration: 200
				// })
			},
			upx2px(udp) {
				return uni.upx2px(udp) + "px";
			},
			getNewHotelList: function(centreType,title){
				console.log("this.citys>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>",this.citys)
					var that = this;
					var param = {
						pageIndex: currentPage,
						pageSize: '6',
						title:title,
						centreType:centreType
					}
					this.$postApi(this.$path.GET_NEW_DESTINATION_LIST,param).then(res=>{
						let list = res.data.data.list
						console.log("集散地返回数据------------>",res.data.data)
						if (res.data.success) {
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage)
							item.subTitle = item.subTitle ? item.subTitle.toString().split(','): ''
						})
						
						if (currentPage == 1) {
							var content = list
						} else {
							var content = that.datas.concat(list)
						}
						
						var isNoMore = false
						var isEmpty = false

						if (content.length == 0) {
							isEmpty = true;
							isNoMore = false;
						} else if (!res.data.data.hasNextPage){
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						currentPage++;
						this.datas = content;
						this.isNoMore = isNoMore;
						this.isEmpty = isEmpty;
					}
					})
			},
			goToTravel:function(id){
				uni.navigateTo({
					url:'/pages/travelDetail/travelDetail?id=' + id + '&title='+'详细介绍',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.br{
		width: 93%;
		height: 1upx;
		background: #eee;
		margin: 20upx 24upx;
		// padding: 20upx 0;
	}
	.readCount{
		position: absolute;
		bottom: 20upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		color: #999999;
	}
	.br-division{
		height: 22upx;
		background-color: #f7f7f7;
	}
	.discover-travelist-aers{
		padding: 5upx 12upx;
		background-color: #353638;
		border-radius: 20upx;
		opacity: 0.9;
		position: absolute;
		bottom:15upx;
		left: 15upx;
		font-family: PingFang-SC-Bold;
		font-size: 20upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #ffffff;
	}
	.icon-shuaxin{
		font-size: 30upx;
	}
	.recommend-list{
		padding: 0 24upx 24upx 24upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.recommend-list-info{
		width: 48.5%;
		
		.recommend-list-img{
			height: 272upx;
			// background: red;zheu
			image{
				border-radius: 6upx 6upx 0 0;
			}
		}
		margin-bottom: 24upx;
	}
	.recommend-list-info-box{
		// height: 165upx;
		background-color: #f3f4f8;
		border-radius: 0px 0px 6px 6px;
		padding:20upx 0 30upx 18upx;
		.recommend-list-title{
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
	
			// margin-bottom: 12upx;
			font-family: PingFang-SC-Bold;
			font-size: 36upx;
			font-weight: 600;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #1a1a1a;
			// padding-bottom: 10upx;
		}
		.recommend-list-text{
			padding-top: 10upx;
			line-height: 38upx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			text-overflow: ellipsis;
			font-family: PingFang-SC-Medium;
			font-size: 26upx;
			font-weight: normal;
			font-stretch: normal;
			// line-height: 35px;
			letter-spacing: 1upx;
			color: #808080;
		}
	}
	.localRecommend{
		.localRecommend-title{
			
			font-family: PingFang-SC-Bold;
			font-size: 44upx;
			font-weight: bold;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #000000;
		}
		.recommend-tab{
			padding-top: 38upx;
			display: flex;
			font-family: PingFang-SC-Regular;
			font-size: 30upx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #999999;
			.text-coleor{
				padding: 8upx 20upx;
				border-radius: 6upx;
				border: solid 1upx #999999;
				margin-right: 15upx;
			}
		}
		padding: 30upx 24upx;
	}
	.popular-travels{
		padding: 30upx 24upx 0 24upx;
	}
	.popular-travels-role{
		display: flex;
		padding-bottom: 36upx;
	}
	.popular-travels-list-headPortrait{
		width: 36upx;
		height: 36upx;
		margin-right: 8upx;
		// border-radius: 50%;
	}
	.popular-travels-list-author{
		margin-bottom: 10upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #333333;
		opacity: 0.9;
	}
	.popular-travels-list-time{
		font-family: PingFang-SC-Medium;
		font-size: 20upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #999999;
		opacity: 0.9;
	}
	.popular-travels-title{
		padding: 0 0 35upx 0;
		font-family: PingFang-SC-Bold;
		font-size: 44upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #000000;
	}
	.popular-travels-list{
		width: 48.5%;
		margin-bottom: 24upx;
		background-color: #f3f4f8;
		border-radius: 0px 0px 6px 6px;
		.popular-travels-list-info{
			padding: 20upx 13upx 0 13upx;
		}
	}
	.popular-travels-list-boxs{
		background: #fff;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 18upx 0 24upx 0;
		.popular-travels-list-img{
			position: relative;
			width: 100%;
			height: 267upx;
		}
		.popular-travels-list-text{
			line-height: 40upx;
			margin-bottom: 20upx;
			font-family: PingFang-SC-Bold;
			font-size: 32upx;
			font-weight: 600;
			font-stretch: normal;
			letter-spacing: 0upx;
			color: #1a1a1a;
		}
		
	}
	.snack-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.snack-content-box{
		padding: 0 0 12upx 0;
		width: 345upx;
		height: 276upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.snack{
		padding: 10upx 25upx 35upx 24upx;
	}
	.snack-title{
		width: 100%;
		height: 100%;
		font-family: PingFang-SC-Medium;
		display: flex;
		justify-content: space-between;
	}
	.snack-titles{
		font-weight: bold;
		font-family: PingFang-SC-Bold;
		font-size: 40upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #000000;
	}
	.parent {
		width: 100%;
	}
	.content{
		// padding: 25upx;
		/* #ifdef H5 */
			margin-top: 90upx;
		/* #endif */
	}
	.search{
		background: #fff;
		position: fixed;
		z-index: 9999;
		/* #ifdef H5 */
		// top: 10upx;
		/* #endif */
		/*#ifdef MP-WEIXIN*/
		// top:10upx;
		/*#endif*/
	}
	.degests{
		font-family: PingFang-SC-Medium;
		line-height: 38upx;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	.search-bar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 0 0 0 80upx;
	}
	.time{
		margin-left: 30upx;
		font-size: 18upx;
		height: 50upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0;
		line-height: 20upx;
	}
	.nav-bar{
		background: #fff;
		/* position: ; */
		margin-top: 120upx;
		/* height:280upx; */
		padding: 0 60upx 0 60upx;
	}
	.hotel-list{
		padding: 0 24upx 0 10upx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		.hotel-img{
			position: relative;
			width: 40%;
			height: 210upx;
			border-radius: 10upx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
			.address{
			  position: absolute;
			  top: 0;
			  left: 0;
			  font-size: 24upx;
			  color: #fff;
			  padding: 10upx;
			  background: rgba($color: #000, $alpha: 0.6);
			  border-bottom-right-radius: 15upx;
			  border-top-left-radius: 10upx;
			  // width: 100upx;
			  // height: 40upx;
			}
		}
		.hotel-info{
			position: relative;
			padding-top: 7upx;
			font-size: 28upx;
			width: 52%;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			// align-items: flex-start;
			// border-bottom: 1upx solid #eee;
			padding-bottom: 12upx;
			
			.hotel-name{
				font-family: PingFang-SC-Bold;
				width: 100%;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				margin-bottom: 16upx;
			}
			.hotel-read{
				color: #aaa;
				// width: 100%;
				font-weight: 400;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				font-size: 26upx;
				text{
					margin-right: 4upx;
				}
			}
			.hotel-address{
				
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				width: 358upx;
				text{
					color: #888;
					font-weight: 400;
					font-size: 26upx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
			.hotel-tip{
				height: 44upx;
				margin-bottom: 17upx;
				font-family: PingFang-SC-Medium;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 100%;
				justify-content: flex-start;
				color: #0092ff;
				font-size: 26upx;
				.tips{
					margin-right: 10upx;
					padding: 0 8upx;
					padding-top: 4upx;
					// width: 200upx;
					border-radius: 6upx;
					border: 1upx solid #0092ff;
				}
			}
			.hotel-price{
				font-size: 24upx;
				color: #bbb;
			}
		}
	}
</style>